<!-- 跟投支付查看 -->
<template>
    <div class="viewInvestmentPay">
        <div class="info-title first">跟投人信息</div>
        <ul>
            <li><span>姓名：</span><span>{{projectRow.userName}} </span></li>
            <li><span>工号：</span><span>{{projectRow.userNum}}</span></li>
            <li><span>业务线：</span><span>{{projectRow.businessLineName}}</span></li>
            <li><span>部门：</span><span>{{projectRow.departmentName}}</span></li>
            <li><span>职位：</span><span>{{projectRow.stationName}}</span></li>
        </ul>
        <div class="info-title">跟投项目信息</div>
        <ul>
            <li><span>项目名称：</span><span>{{projectRow.projectName}} </span></li>
            <li><span>所属城市：</span><span>{{projectInfo.cityName}}</span></li>
            <li><span>跟投总额：</span><span>￥{{projectInfo.investTotalMoney}}</span></li>
            <li><span>申购时限：</span><span>{{timeInterval}}</span></li>
        </ul>
        <div class="info-title">打款账号信息</div>
        <ul>
            <li><span>开户名称：</span><span>{{projectInfo.accountName}} </span></li>
            <li><span>开户行：</span><span>{{projectInfo.openingBank}}</span></li>
            <li><span>所属省市：</span><span>{{projectInfo.openingBankProvince+projectInfo.openingBankCity||'-'}}</span></li>
            <li><span>银行账号：</span><span>{{projectInfo.bankAccount}}</span></li>
            <li><span>联行号：</span><span>{{projectInfo.bankNumber}}</span></li>
        </ul>
        <div class="info-title">跟投费用信息</div>
        <ul>
            <li><span>业务类型：</span><span>{{businesTypeArray[projectRow.businesType]||''}} </span></li>
            <li><span>应付金额：</span><span>￥{{projectRow.orderSunAmount}}</span></li>
            <li><span>实付金额：</span><span>￥{{projectRow.alreadyAmount}}</span></li>
            <li><span>待付金额：</span><span>￥{{parseFloat(projectRow.orderSunAmount-projectRow.alreadyAmount).toFixed(2) || 0}}</span></li>
            <li><span>创建时间：</span><span>{{projectRow.createTime}}</span></li>
            <li v-show='typeStatus == "detail"'><span>审核状态：</span><span>{{tableFormatter('examineState',urlObj.examineState)}}</span></li>
        </ul>
        <div v-show="typeStatus !='detail'">
            <div class="info-title">在线支付信息</div>
            <table-list 
            :tableData='onlinePayTableData'
            :tableInfos ='onlinePayTableInfos'
            :tableFormatter='tableFormatter'
            :hasSera='true'>
            </table-list>
        </div>
        <div class="img-box" v-show="typeStatus =='detail'">
            <div style="width:50%">
                <div>支付凭证</div>
                <img :src="urlObj.payImageUrl">
            </div>
            <div>
                <div>上传收款凭证</div>
                <img :src="urlObj.collectImageUrl">
            </div>
        </div>
        <div class="info-title">转账汇款信息</div>
        <table class="transfer-info" border="1" width='100%' v-show="typeStatus =='detail'"> 
            <tr>
                <td>银行卡号</td><td>{{urlObj.bankNumber}}</td>
                <td>银行</td><td>{{urlObj.bankName}}</td>
                <td>汇款日期</td><td>{{urlObj.payTime|getTimeString}}</td>
            </tr>
            <tr>
                <td>汇款金额（元）</td><td>￥{{urlObj.money}}</td>
                <td>提交人</td><td>{{projectRow.userName}}</td>
                <td>提交时间</td><td>{{urlObj.createTime|getTimeString}}</td>
            </tr>
        </table>
        <table-list 
        v-show='typeStatus != "detail"'
        :tableData='transferTableData'
        :tableInfos ='transferTableInfos'
        :tableChangeBtns='tableChangeBtns'
        :tableFormatter='tableFormatter'
        :hasSera='true'>
        </table-list>
        <div v-show="typeStatus=='unlock'">
            <el-form :model="lockForm" :inline="true" style="margin-top:50px;" ref="lockForm">
                <el-form-item label="解锁原因：" :rules="rules.lockReason" prop="lockReason">
                    <el-input type="textarea" :rows="4" style="width:calc(100vw - 450px);"  v-model="lockForm.lockReason"></el-input>
                </el-form-item>
                <div style="text-align:center">
                    <el-button type="primary" @click="unlock">解锁</el-button>
                    <el-button type="primary" @click="$router.go(-1)">取消</el-button>
                </div>
            </el-form>
        </div>
        
        <div v-show="typeStatus!='unlock'">
            <div class="info-title">操作记录</div>
            <audit-table  :tableData="auditTableData"></audit-table>
        </div>
    </div>
</template>
<script>
import api from '@/api/apiPath'
import tableList from './tableList'
import auditTable from './auditTable'
import utils from '@/common/utils'
export default {
	components: {
        'table-list':tableList,
        'audit-table':auditTable
        },
	data () {
		return {
            projectInfo:{},//项目信息
            projectRow:{},//列表带入
            money:'321',

            lockForm:{
                lockReason:''
            },
            onlinePayTableInfos:[
                {label:'交易流水号',prop:'pipelineNumber'},
                {label:'实付金额（元）',prop:'money'},
                {label:'支付方式',prop:'payWay'},
                {label:'支付状态',prop:'payState'},
                {label:'支付时间',prop:'payTime'},
            ],
            transferTableInfos:[
                {label:'交易流水号',prop:'pipelineNumber'},
                {label:'实付金额（元）',prop:'money'},
                {label:'汇款日期',prop:'payTime'},
                {label:'银行卡号',prop:'bankNumber'},
                {label:'开户行',prop:'bankName'},
                {label:'审核状态',prop:'examineState'},
                {label:'上传时间',prop:'createTime'},
                {label:'操作',prop:'changeBtn'},
            ],
            tableChangeBtns:[
                {label:"查看",type:'view',fn:this.viewList},
            ],
            onlinePayTableData:[],
            transferTableData:[],
            auditTableData:[],
            historyData:[],//表格历史数据
            typeStatus:'',//页面状态
            firstStatu:'',//初始页面状态
            typeFunction:{
                view:(orderId,projectId)=>{//查看
                    this.loadFitstDetail(orderId,projectId);
                },
                ditail:(insideId,sort)=>{//汇款信息详情
                    //this.loadFromDetail(insideId,sort);//加载表单信息
                    //this.loadprovinces();
                    
                },
                unlock:(orderId,projectId)=>{ //解锁
                    this.loadFitstDetail(orderId,projectId);
                }
            },
            rules:{
                lockReason:[
                    { required: true, message: '请输入解锁原因', trigger: ['blur','change']},
                    { max: 100, message: '长度不能超过100字', trigger: ['blur','change']}
                ],
                    
                
            },
            businesTypeArray:['','募集','定向','转让'],
            urlObj:{},
        }
    },
    methods:{
        //转账汇款列表格式化
        tableFormatter(prop,cellValue){
            if(prop === 'payTime' || prop==='createTime' ||prop === 'payTime'){
                return utils.getTimeString(cellValue);
            }
            let valueMap = {
                examineState:['','待审核','审核通过','审核不通过'],
                payWay:['非在线支付','支付宝支付','微信支付','通联支付'],
                payState:['支付成功','支付失败']
            }
            return valueMap[prop]?valueMap[prop][cellValue]:cellValue;
        },
        //新增查看编辑
        viewList(type,idx){
            this.historyData = {
                auditTableData:this.auditTableData,
            }
            this.typeStatus = 'detail';
            this.loadTransferDetail(idx)
            
        },
        loadTransferDetail(idx){
            //支付凭证喝收款凭证赋值
          
            this.urlObj = this.transferTableData[idx];
            this.axios.get(`${api.getInvestmentPayLog}?orderId=${this.urlObj.id}`).then(res => {
                if (res.data.code == 200) {
                    let list = res.data.data;
                    this.auditTableData = list;
                }
            })
        },
        loadFitstDetail(orderId,projectId){
        
            let param = {
              orderId:orderId,
              projectId:projectId
            };
            
            this.axios.get(`${api.getInvestmentPayDetail}?orderId=${orderId}&projectId=${projectId}`).then(res => {
                if (res.data.code == 200) {
                    let list = res.data.data;
                    this.auditTableData  = list.logInfos;
                    this.onlinePayTableData = list.orderInLineAmounts;
                    this.transferTableData = list.orderOutLineAmounts;
                    this.projectInfo = list.projectInfo;
                   
                }
            })
            
        },
        unlock(){
            this.$refs.lockForm.validate((valid)=>{
                if(!valid){
                    return;
                }
                let params={
                    projectId:this.projectRow.projectId,
                    orderId:this.projectRow.id,
                    number:this.projectRow.number,
                    lockingIdea:this.lockForm.lockReason,
                }
                this.axios.post(api.unlockInvestmentPay,params).then(res => {
                    if (res.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '已解锁',
                        });
                        this.$router.go(-1);
                    }
                })
                
            })
        }
    },
    
	created () {
        let {pageType,row} = this.$route.query;
        //更改页面状态（查看/详情/解锁）
        this.typeStatus = pageType;
        this.firstStatu = pageType;
        this.projectRow = row;
        let {projectId,id} = row;
        if(!projectId ||!id){
            this.$router.go(-1);
            return;
        }
        this.typeFunction[pageType](id,projectId);
    },
   
	destroyed() {
		
	},
	filters: {
        getTimeString(time){
            return utils.getTimeString(time)
        }
    },
    computed:{
        timeInterval(){
            let {applyEndTime,applyBeginTime} = this.projectInfo;
            if(!applyBeginTime) return '';
            return `${applyBeginTime.slice(0,10)} ~ ${applyEndTime.slice(0,10)}`;
        }
    },
    beforeRouteLeave(to,from,next){
        if(this.firstStatu === this.typeStatus){
            next();
        }
        this.typeStatus = this.firstStatu;
        this.auditTableData = this.historyData.auditTableData;
        next(false)
    },
  
}

</script>

<style lang="stylus" scoped>
.viewInvestmentPay{
    ul{
        padding: 0;
        margin: 0;
        list-style: none;
        display :flex;
        flex-wrap: wrap ;
        margin-bottom: 20px;
        padding-bottom: 20px;
        

        &:last-of-type{
            border-bottom: 1px solid #ddd;
        }

       li{
           width:calc(33% - 20px);
           padding:10px;
           display :flex;

           span{
                word-break: break-all;
                line-height: 24px;

               
               &:nth-child(2){
                    width:calc(100% - 80px);
               }
              
           }
           
       }
    }
    .info-title{
        padding:10px 0;
        font-size :17px;
        font-weight :700;
        margin-top:40px;

        &.first{
            margin-top:0;
        }
    }
    .img-box{
        display:flex;
        padding-top:30px;


        img{
            width:150px;
            margin-top:15px;
        }
    }
    .transfer-info{
        table-layout: fixed;
        border : 1px solid #ebeef5;
        border-collapse:collapse;
        text-align :center;
        font-size:14px;

        td{
            padding:12px 10px;
            line-height :23px;   
            word-break: break-all;
            &:nth-child(2n-1){
                background-color :#f5f7fa;
            }
        }
    }
}

</style>
